<template>
  <div ref="bounds" class="quill-editor">
    <!-- <el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess"
      :on-error="handleUploadError" name="file" :show-file-list="false" :headers="headers" style="display: none"
      ref="upload" v-if="this.type == 'url'">
    </el-upload> -->
    <div ref="editorRef"></div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, defineProps, defineEmits } from 'vue'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import Quill from 'quill'

const props = defineProps({
  modelValue: Object
})
const emit = defineEmits(['update:modelValue'])

const bounds = ref(null)
const editorRef = ref(null)
let editor = null

const sinicize = () => {
  const TOOLBAR_TILTE = {
    'ql-bold': ['加粗'],
    'ql-italic': ['倾斜'],
    'ql-underline': ['下划线'],
    'ql-strike': ['删除线'],
    'ql-blockquote': ['块引用'],
    'ql-script': ['下标', '上标'],
    'ql-list': ['编号列表', '项目符号列表'],
    'ql-indent': ['减少缩进量', '增加缩进量'],
    'ql-align': ['对齐', '左对齐', '居中', '右对齐', '两端对齐'],
    'ql-color': ['字体颜色'],
    'ql-background': ['文本突出显示颜色'],
    'ql-size': ['字号'],
    'ql-header': ['标题'],
    'ql-link': ['链接'],
    'ql-image': ['图片'],
    'ql-clean': ['清除样式']
  }
  for (let key in TOOLBAR_TILTE) {
    Array.from(
      bounds.value.querySelectorAll(
        `.ql-toolbar .ql-formats > .${key}`
      )
    ).forEach((item, index) => {
      if (key === 'ql-align') {
        Array.from(item.querySelectorAll('[role=button]')).forEach(
          (role, rIndex) => {
            role.title = TOOLBAR_TILTE[key][rIndex]
          }
        )
      } else {
        item.title = TOOLBAR_TILTE[key][index]
      }
    })
  }
}

const change = () => {
  editor.on('text-change', () => {
    emit('update:modelValue', editor.getContents())
  })
  console.log('[ props.modelValue ] >', props)
}

onMounted(() => {
  const options = {
    theme: 'snow',
    bounds: bounds.value,
    placeholder: '请输入内容',
    modules: {
      toolbar: {
        container: [
          [
            { size: ['small', false, 'large', 'huge'] },
            { header: [1, 2, 3, 4, 5, 6, false] }
          ],
          [
            { color: [] },
            { background: [] },
            'bold',
            'italic',
            'underline',
            'strike',
            'blockquote',
            { script: 'sub' },
            { script: 'super' }
          ],
          [
            { list: 'ordered' },
            { list: 'bullet' },
            { indent: '-1' },
            { indent: '+1' },
            { align: [] }
          ],
          ['link', "image", "video"],
          ['clean']
        ]
      }
    }
  }
  editor = new Quill(editorRef.value, options)
  if (props.modelValue) {
    editor.setContents(props.modelValue)
  }
  sinicize()
  change()
  watch(
    () => props.modelValue,
    (newVal) => {
      if (editor && newVal && JSON.stringify(newVal) !== JSON.stringify(editor.getContents())) {
        editor.setContents(newVal)
      }
    }
  )
  console.log('[ editor ] >', editor ? editor.getContents() : null)
  console.log('[ props ] >', props)
  console.log('[ editorRef.value, ] >', editorRef.value)
  console.log('[ bounds.value, ] >', bounds.value)
}
)
</script>

<style lang="scss" scoped>
.quill-editor {
  ::v-deep {
    .ql-editor {
      min-height: 600px;
      max-height: 1000px;
    }

    .ql-snow.ql-toolbar {
      .ql-picker.ql-header {
        width: 70px;

        .ql-picker-label::before,
        .ql-picker-item::before {
          content: '普通';
        }

        .ql-picker-label[data-value='1']::before,
        .ql-picker-item[data-value='1']::before {
          content: '标题一';
        }

        .ql-picker-label[data-value='2']::before,
        .ql-picker-item[data-value='2']::before {
          content: '标题二';
        }

        .ql-picker-label[data-value='3']::before,
        .ql-picker-item[data-value='3']::before {
          content: '标题三';
        }

        .ql-picker-label[data-value='4']::before,
        .ql-picker-item[data-value='4']::before {
          content: '标题四';
        }

        .ql-picker-label[data-value='5']::before,
        .ql-picker-item[data-value='5']::before {
          content: '标题五';
        }

        .ql-picker-label[data-value='6']::before,
        .ql-picker-item[data-value='6']::before {
          content: '标题六';
        }
      }

      .ql-picker.ql-size {
        width: 70px;

        .ql-picker-label::before,
        .ql-picker-item::before {
          content: '普通';
        }

        .ql-picker-label[data-value='small']::before,
        .ql-picker-item[data-value='small']::before {
          content: '小';
        }

        .ql-picker-label[data-value='large']::before,
        .ql-picker-item[data-value='large']::before {
          content: '中';
        }

        .ql-picker-label[data-value='huge']::before,
        .ql-picker-item[data-value='huge']::before {
          content: '大';
        }
      }
    }

    .ql-snow .ql-tooltip::before {
      content: '链接';
    }

    .ql-snow .ql-tooltip a.ql-action::after {
      content: '编辑';
    }

    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      content: '保存';
    }

    .ql-snow .ql-tooltip a.ql-remove::before {
      content: '移除';
    }
  }
}
</style>
